<template>
  <div>
    <div class="wy-filter">
      <el-input placeholder="请输入要搜索的科室名称" v-model="searchValue"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="success" @click="add">添加</el-button>
    </div>
    <el-table :data="tableData.records" border>
      <el-table-column label="编码" prop="code"></el-table-column>
      <el-table-column label="科室名称" prop="name"></el-table-column>
      <el-table-column label="科室类型" prop="type"></el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.delmark">有效</el-tag>
          <el-tag type="danger" v-else>无效</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140px">
        <template #default="scope">
          <template v-if="scope.row.delmark">
            <el-button plain type="primary" size="small" @click="update(scope.row.id)">修改</el-button>
          <el-button type="danger" size="small" @click="del(scope.row.id, 0)">删除</el-button>
          </template>
          <el-button type="warning" size="small"  @click="del(scope.row.id, 1)" v-else>还原</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
      style="margin-top: 10px;"
      background
      :total="tableData.total"
      v-model:page-size="params.pageSize"
      v-model:current-page="params.pageNo"
      @change="getTableData">
    </el-pagination>

    <el-dialog
      width="600px"
      v-model="dialog.show"
      :title="dialog.title"
      :close-on-click-modal="false">
<!--      父组件给子组件传值传函数-->
      <Editor v-if="dialog.show"
              v-model:show="dialog.show"
              @getTableData="getTableData"
              :id="dialog.id"
              ></Editor>
    </el-dialog>
  </div>
</template>

<script setup>
import { get,post } from '@/util/axios'
import { reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import Editor from './editor.vue'
import {url} from './api.js'
const tableData = reactive({
  records: [],
  pages: 0,
  total: 0
})
const params = reactive({
  pageNo: 1,
  pageSize: 10,
  name: ''
})
const searchValue = ref('')
const dialog = reactive({
  show: false,
  title: '',
  id:null
})
getTableData()

function update(id){
  dialog.title = '修改科室'
  dialog.id=id
  dialog.show=true
}
function add () {
  dialog.title = '添加科室'
  dialog.show = true
  dialog.id=null
}
function del(id, delmark){
  const text = delmark ? '确定要将该科室还原吗？' : '确定要将该科室删除吗？'
  ElMessageBox.confirm(text, '警告', {
    type: 'warning'
  }).then(() => {
    post(url.del, { id, delmark }, content => {
        getTableData()
    })
  }).catch(() => {})

}

function search () {
  params.pageNo = 1
  params.name = searchValue.value
  getTableData()
}
function getTableData () {
  get(url.list, params, content => {
    tableData.records = content.records
    tableData.pages = content.pages
    tableData.total = content.total
  })
}

</script>

<style scoped lang="scss">
</style>
